<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高校教材管理系统</title>
	<%@ include file="./model/link.jsp" %>
	<link href="${pageContext.request.contextPath}/style/screen.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/style/lightbox.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/smooth-sliding-menu.js"></script>
</head>

<body>
	<%@ include file="./model/userInfoModel.jsp" %>
	
    <!-- 导航栏 -->
 	<%@ include file="./model/nav.jsp" %>
    <!-- 导航栏 /-->
	<div id="tip" style="position:fixed;"></div>
    <!-- 版心 -->
    
    <!-- 班级利用教材输入面板 -->
    <div id='toggleClassPutModel' class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<!--标题区域-->
					<h4 class="modal-title">
						班级领用教材
						<button	 class="close" data-dismiss="modal">
							<span style="font-size:25px;">&times;</span>
						</button>
					</h4>
				</div>
						
				<div class="modal-body" style="padding-bottom: 0;">
					<form action="${pageContext.request.contextPath}/ClassPut" method="post" class='form-group' 
						onsubmit='return checkBookPut(this);'>
						<input id='ClassPut-book_imgsrc' type='hidden' name='book_imgsrc'/>
						<input id='ClassPut-book_name' type='hidden' name='book_name'/>
						<input id='ClassPut-typename' type='hidden' name='typename'/>
						<input id='ClassPut-press_name' type='hidden' name='press_name'/>
						<input id='ClassPut-put_id' type='hidden' name='put_id'/>
						
						<div class='input-group' style="margin: 5px auto;width: 85%;">
							<span class="input-group-addon Classmodel-left-addon">领用班级</span>
							<select id="choose-class" name="class_id" class='form-control'>
								<c:forEach items="${ClassList}" var="class_list">
									<option value="${class_list.class_id}">${class_list.class_name}</option>
								</c:forEach>
							</select>
						</div>
						<div class='input-group' style="margin: 5px auto;width: 85%;">
							<span class='input-group-addon Classmodel-left-addon'>领用数量</span>
							<input id='ClassPut-number' type='number' name='number' min="1"/>
						</div>
						<div class="modal-footer Classmodel-footer">
							<input type="submit" value='领用' class="btn btn-success btn-sm" style="border:none;outline:none;">
							<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal" style="border:none;outline:none;"> 取消</button> 
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
     <div class="wrapper">
    	<%@ include file="./model/Leftnav.jsp" %>
        <div class="page-content">
            <div class="content container">
                <div class="widget">
		            <div class="widget-header"> 
		            	<i class="icon-tasks"></i>
		              	<h3>已征订教材</h3>
		            </div>
		            <div class="widget-content">
		              <div id="examples" class="section examples-section">
		                 <c:forEach items="${orderOfPut}" var="order">
		                   <div class="col-sm-4 col-md-2">
		                   <div class="image-row">
		                      <div class="image-set"> 
		                    	  <a class="example-image-link" href="javascript:;" 
		                    		data-lightbox="example-set" title="${order.book_name}" >
		                    		<div class="book-info-box" style="position:relative;">
		                    		  <img class="example-image" src="${pageContext.request.contextPath}/img/book/${order.book_imgsrc}" 
		                    			alt="无法显示图片" width="150" height="200" />
			                    		  <div class="order-of-put-box">
			                    			 <ul>
			                    			   <li>
											   		<span>征订单编号：</span>
											   		<span>${order.order_id}</span>
											   </li>
											   <li>
											   		<span>书号：</span>
											   		<span>${order.book_id}</span>
											   </li>
											   <li>
											   		<span>书名：</span>
											   		<span>${order.book_name}</span>
											   </li>
											   <li>
											   		<span>作者：</span>
											   		<span>${order.author}</span>
											   </li>
											   <li>
											   		<span>分类：</span>
											   		<span>${order.typename}</span>
											   </li>
											   <li>
											   		<span>出版社：</span>
											   		<span>${order.press_name}</span>
											   </li>
											   <li>
											   		<span>出版日期：</span>
											   		<span>${order.dates}</span>
											   </li>
											   <li>
											   		<span>征订数量：</span>
											   		<span>${order.number}</span>
											   </li>
											   <li style="margin-top:3px;height: 22px;">
											   		<form action="${pageContext.request.contextPath}/BookPut" method="post">
											   			<input type='hidden' name='order_id' value='${order.order_id}' />
											   			<input type='hidden' name='book_imgsrc' value='${order.book_imgsrc}' />
											   			<input type='hidden' name='book_id' value='${order.book_id}' />
											   			<input type='hidden' name='book_name' value='${order.book_name}' />
											   			<input type='hidden' name='typeName' value='${order.typename}' />
											   			<input type='hidden' name='author' value='${order.author}' />
											   			<input type='hidden' name='press_name' value='${order.press_name}' />
											   			<input type='hidden' name='put_number' value='${order.number}' />
											   			<input type='submit' id="order-book-put" class="btn btn-primary btn-sm" style="padding: 1px 10px;" value='+入库'/>
											   		</form>
											   </li>
			                    			 </ul>
			                    		  </div>
		                    		 </div> 
		                    	  </a> 
		                       </div>
		                     </div>
		                   </div>
		                 </c:forEach>
		               </div>
		             </div>
		          </div>
		          
		          <div class="widget" style="overflow: inherit;">
		            <div class="widget-header"> 
		            	<i class="icon-tasks"></i>
		              	<h3>已入库教材</h3>
		            </div>
		            <div class="widget-content">
		              <div class="widget-content">
			        	
 						<table class="table table-striped table-images">
                            <thead>
                                <tr>
	                                <th class="hidden-xs-portrait">入库单编号</th>
	                                <th>书籍封面</th>
	                                <th>书号</th>
	                                <th>书名</th>
	                                <th class="hidden-xs-portrait">分类</th>
	                                <th class="hidden-xs">作者</th>
	                                <th class="hidden-xs">出版社</th>
	                                <th class="hidden-xs">出版日期</th>
	                                <th class="hidden-xs">入库数量</th>
                                	<th></th>
                                </tr>
                            </thead>
			                <tbody >
			                  	<c:forEach items="${BookPutEnd}" var="book" varStatus="idxStatus">
				                    <tr class="result-item" data-index="${idxStatus.index}">
                                        <td class='Putbook_put_id' class="hidden-xs-portrait">${book.put_id}</td>
                                        <td class="book-img-box" style="position:relative;cursor:pointer;">
                                        	<div class="big_img_box">
                                        		<img src="${pageContext.request.contextPath}/img/book/${book.book_imgsrc}" />
                                        	</div>
                                        	<img class="Putbook_book_imgsrc" data-src="${book.book_imgsrc}" 
                                        		src="${pageContext.request.contextPath}/img/book/${book.book_imgsrc}"/>
                                        </td>
                                        <td>${book.book_id}</td>
                                        <td class="Putbook_book_name">${book.book_name}</td>
                                        <td class="Putbook_typename">${book.typename}</td>
                                        <td>${book.author}</td>
                                        <td class="Putbook_pressname">${book.press_name}</td>
                                        <td class="hidden-xs-portrait">${book.dates}</td>
                                        <td class="hidden-xs Putbook_number">${book.number}</td>
                                        <td>
                                        	<button class="btn btn-sm btn-primary toggleClassPut"
                                        		 style="display: inline-block;vertical-align: middle;" data-target="#toggleClassPutModel" 
                                        		 data-toggle="modal">
                                        		班级领用教材
                                        	</button>
                                        </td>
				                    </tr>
			                    </c:forEach>
			                </tbody>
			            </table>
		             </div>
		          </div>
              </div>
          </div>
      </div>
    <!-- 版心 /-->
    
    <!-- 底部 -->
	<%@ include file="./model/footer.jsp" %>
    <!-- 底部 /-->
	<script type="text/javascript" src="js/index.js"></script>
    <script>
    	jQuery('.footer').css('position','fixed')
    	var target = '${target}'
    	toggleStyleLeftNav(parseInt(target))
    	function toggleStyleLeftNav(index){
    	    jQuery(jQuery('#nav li')).removeClass("current")
    	    jQuery(jQuery('#nav li')[index]).addClass("current")
    	}
	    for(let i =0;i < jQuery('.book-img-box').length;i++){
	    	jQuery(jQuery('.book-img-box')[i]).on('mouseover',function (){
	    		jQuery(jQuery('.big_img_box')[i]).stop().fadeIn()
	    	})
	    	jQuery(jQuery('.book-img-box')[i]).on('mouseout',function (){
	    		jQuery(jQuery('.big_img_box')[i]).stop().fadeOut()
	    	})
	    }
	    
	    for(let i =0;i < jQuery('.toggleClassPut').length;i++){
	    	jQuery(jQuery('.toggleClassPut')[i]).on('click',function (){
	    		jQuery("#toggleClassPutModel").modal({
		      	     show: true,
		      	     backdrop: 'true',
		      	     keyboard: true
		      	})
		      	
		      	var book_imgSrc = jQuery(jQuery('.Putbook_book_imgsrc')[i]).attr('data-src')
		      	var book_name = jQuery(jQuery('.Putbook_book_name')[i]).text()
		      	var typeName = jQuery(jQuery('.Putbook_typename')[i]).text()
		      	var pressName = jQuery(jQuery('.Putbook_pressname')[i]).text()
		      	var putId = jQuery(jQuery('.Putbook_put_id')[i]).text()
		      	var max = jQuery(jQuery('.Putbook_number')[i]).text()
		      	
		      	//设置入库单编号到领用教材面板中的 book_imgsrc 参数中。用于提交
		      	jQuery('#ClassPut-book_imgsrc').val(book_imgSrc)
		      	
		      	//设置入库单编号到领用教材面板中的 book_name 参数中。用于提交
		      	jQuery('#ClassPut-book_name').val(book_name)
		      	
		      	//设置入库单编号到领用教材面板中的 typename 参数中。用于提交
		      	jQuery('#ClassPut-typename').val(typeName)
		      	
		      	//设置入库单编号到领用教材面板中的 press_name 参数中。用于提交
		      	jQuery('#ClassPut-press_name').val(pressName)
		      	
		        //设置入库单编号到领用教材面板中的 put_id 参数中。用于提交
		      	jQuery('#ClassPut-put_id').val(putId)
		      	
		        //设置领用数量最大值 max 为当前要领用的教材的库存数量。用于提交
		      	jQuery('#ClassPut-number').attr('max',max)
		      	
		      	//选择班级编号的默认值[动态渲染的第一个班级编号]
		      	jQuery('#ClassPut-class_id').val(jQuery('#choose-class option')[0].value)
	    	})
	    }
	    
	    //检测领用数量是否为空
	    function checkBookPut(form){
	    	if(form.number.value == ''){
	    		jQuery('#tip').css({
	    			'top' : "8%",
	    			'z-index' : '9999'
	    		})
	    		jQuery('#tip').stop().fadeIn().text('请输入领用数量！！！')
	    		setTimeout(function(){
	    			jQuery('#tip').stop().fadeOut()
	    		},1500)
	    		return false
	    	}else {
	    		return true
	    	}
	    }
    </script>
</body>

</html>